<template>
  <div class="box">
    <div class="header">
      <HdView />
    </div>
    <div class="footer">
      <div class="left">
        <div class="singlechoice" @click="sc">
          <div class="pic">
            <img
              src="@/assets/images/single-choice.png"
              alt="单选"
              width="25px"
              height="25px"
            />
          </div>
          <div class="doc"><p>单项选择</p></div>
        </div>
        <div class="space"></div>
        <div class="multiplechoice">
          <div class="pic">
            <img
              src="@/assets/images/multiple-choice.png"
              alt="多选"
              width="25px"
              height="25px"
            />
          </div>
          <div class="doc"><p>多项选择</p></div>
        </div>
        <div class="space"></div>
        <div class="completion">
          <div class="pic">
            <img
              src="@/assets/images/completion.png"
              alt="填空"
              width="25px"
              height="25px"
            />
          </div>
          <div class="doc"><p>填空</p></div>
        </div>
        <div class="space"></div>
        <div class="shortanswer">
          <div class="pic">
            <img
              src="@/assets/images/short-answer.png"
              alt="简答"
              width="25px"
              height="25px"
            />
          </div>
          <div class="doc"><p>简答</p></div>
        </div>
        <div class="space"></div>
        <div class="fileupload">
          <div class="pic">
            <img
              src="@/assets/images/file-upload.png"
              alt="文件上传"
              width="25px"
              height="25px"
            />
          </div>
          <div class="doc"><p>文件上传</p></div>
        </div>
        <div class="space"></div>
      </div>

      <div class="right">
        <div class="title">
          <div class="qs">
            请输入标题:
            <br />
          </div>

          <div class="answer"><input type="text" /></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HdView from "@/components/HdView";

export default {
  components: {
    HdView,
  },
  methods: {
    sc() {},
  },
};
</script>

<style lang="less" scoped>
.footer {
  width: 1440px;
  height: 908px;
  margin: 0 auto;
  .left {
    float: left;
    width: 200px;
    height: 908px;
    background: whitesmoke;
    .singlechoice {
      border-radius: 8px;
      float: left;
      width: 200px;
      height: 52px;
      margin: 0 auto;
      position: relative;
      &:hover {
        background: pink;
      }

      .pic {
        display: flex;
        justify-content: center;
        align-items: center;
        float: left;
        width: 67px;
        height: 50px;
      }
      .doc {
        display: flex;
        align-items: center;
        float: left;
        width: 133px;
        height: 50px;
        p {
          margin-left: 16px;
        }
      }
    }
    .space {
      margin-left: 10px;
      float: left;
      width: 180px;
      height: 1px;
      background-color: #000;
    }
    .multiplechoice {
      float: left;
      width: 200px;
      height: 52px;
      margin: 0 auto;
      position: relative;
      &:hover {
        background: pink;
      }

      .pic {
        display: flex;
        justify-content: center;
        align-items: center;
        float: left;
        width: 67px;
        height: 50px;
      }
      .doc {
        display: flex;
        align-items: center;
        float: left;
        width: 133px;
        height: 50px;
        p {
          margin-left: 16px;
        }
      }
    }
    .space {
      margin-left: 10px;
      float: left;
      width: 180px;
      height: 1px;
      background-color: #000;
    }
    .completion {
      float: left;
      width: 200px;
      height: 52px;
      margin: 0 auto;
      position: relative;
      &:hover {
        background: pink;
      }

      .pic {
        display: flex;
        justify-content: center;
        align-items: center;
        float: left;
        width: 67px;
        height: 50px;
      }
      .doc {
        display: flex;
        align-items: center;
        float: left;
        width: 133px;
        height: 50px;
        p {
          margin-left: 36px;
        }
      }
    }
    .space {
      margin-left: 10px;
      float: left;
      width: 180px;
      height: 1px;
      background-color: #000;
    }
    .shortanswer {
      float: left;
      width: 200px;
      height: 52px;
      margin: 0 auto;
      position: relative;
      &:hover {
        background: pink;
      }

      .pic {
        display: flex;
        justify-content: center;
        align-items: center;
        float: left;
        width: 67px;
        height: 50px;
      }
      .doc {
        display: flex;
        align-items: center;
        float: left;
        width: 133px;
        height: 50px;
        p {
          margin-left: 36px;
        }
      }
    }
    .space {
      margin-left: 10px;
      float: left;
      width: 180px;
      height: 1px;
      background-color: #000;
    }
    .fileupload {
      float: left;
      width: 200px;
      height: 52px;
      margin: 0 auto;
      position: relative;
      &:hover {
        background: pink;
      }

      .pic {
        display: flex;
        justify-content: center;
        align-items: center;
        float: left;
        width: 67px;
        height: 50px;
      }
      .doc {
        display: flex;
        align-items: center;
        float: left;
        width: 133px;
        height: 50px;
        p {
          margin-left: 16px;
        }
      }
    }
    .space {
      margin-left: 10px;
      float: left;
      width: 180px;
      height: 1px;
      background-color: #000;
    }
  }
  .right {
    float: left;
    width: 1240px;
    height: 908px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    background: url(../assets/images/title-bgi.png) no-repeat;
    background-position: 50px 150px;
    background-size: 1240px 900px;

    .title {
      margin-top: 300px;
      width: 500px;
      height: 162px;
      line-height: 20px;
      border-radius: 5px;
      text-align: center;
      box-shadow: 5px 5px 6px 0px rgba(0, 0, 0, 0.4);
      .qs {
        width: 216px;
        height: 52px;
        color: rgba(255, 227, 0, 100);
        font-size: 36px;
        text-align: left;
        font-family: SourceHanSansSC-regular;
      }
      .answer {
        margin-bottom: 30px;
        line-height: 20px;
        border-radius: 5px;
        background-color: rgba(243, 244, 246, 100);
        text-align: center;
      }
    }
  }
}
</style>